@import "../base/variable.less";
@import "../base/reset";
@import "../base/mixins.less";
@import "../base/global.less";
@import "../../../node_modules/font-awesome/less/variables.less";
@nodeSelf_bg:#1a4761;
@nodeLeaf_bg:#375e75;
.uc-sidemenu{
	background: @nodeSelf_bg;
	font-size: 14px;
	box-shadow: -2px 10px 10px 5px #bfbfbf;
	&,a,button{
		color:#f1f1f1;
	}	
	.menuRoot{
		overflow:hidden;
	}
	.nodeSelf,a{
		padding-right: 20px;
		cursor: pointer;
		.no-select();
	}
	.nodeLeaf,.branchNode_LevelMore .nodeSelf{
		display:block;
		height:40px;
		line-height:40px;
		background: #326686;
		white-space: nowrap;		
		.icon:before{
			content: @fa-var-circle-o;
		}
		&:hover,&.active{
			.icon:before{
				content: @fa-var-circle;
			}
		}
	}
	.nodeSelf{
		display:block;
		.flexCtn();
		white-space: nowrap;
		padding-right: 40px;
		position: relative;
		.state{		
			width:22px;
			height: 22px;
			display: block;
			position:absolute;
			right:10px;
			top:50%;
			font-size: 12px;
			transition:transform 0.15s ease-in;
			transform:rotate(0deg);
			transform-origin:center;
			&:before{
				position: absolute;
				left:50%;
				top:50%;
				transform: translate(-50%,-50%);
			}
		}		
	}
	.branchNode{
		>.nodeSelf{
			.state{
				top:14px;
			}
		}
		&.open{			
			.subMenu{
				display: block;
				height:0;
			}
			>.nodeSelf{
				.state{
					transform:rotate(-90deg);
				}
			}
		}
		&.fold{	
			.subMenu{
				display: block;
				height:0;
			}
		}
		&.branchNode_L1{
			&.open{
				>.nodeSelf{
					background:#113950;
				}
			}
			>.nodeSelf{
				background: @nodeSelf_bg;
				height:48px;
				line-height:48px;
				&:hover{
					background:#0e3a54;
				}
			}
		}
	}
	.branchNode_LevelMore{
		.nodeSelf{
			.state{
				top:10px;
			}	
		}
	}
	.subMenu{
		display: none;
		overflow: hidden;
		transition:height 0.15s ease-in;
	}
	.icon{
		width:22px;
		height: 100%;
		display: inline-block;
		position: relative;
		float:left;
		padding:0 10px;
		text-align: center;
		&:before{
			position: absolute;
			top:50%;
			transform:translateY(-50%);
		}
	}
	.branchNode_LevelMore{
		.nodeSelf{
			.state{
				line-height:40px;
			}
		}
	}
	.noData{
		color:#d1d1d1;
		padding:15px;
		font-size:16px;
	}
	.label{
		
	}
	.shapToggle{
		width:100%;
		text-align: right;
		border-bottom:1px dashed #a1a1a1;
		cursor:pointer;
		.sIcon{
			padding:0 10px;
			line-height:32px;
			font-size:18px;
		}
	}
	&.shapeTwo{
		width:44px;
		.label{
			padding-right:20px;
		}
		.menuRoot {
			overflow: visible;
		}
		.branchNode_L1{
			>.nodeSelf{
				padding: 0;
				.icon{
					padding:0;
					width:100%;
					line-height: 48px;
					&:before{
						position: static;
						top:50%;
						left:50%;
					}
				}
				.label{
					display: none;
				}
				.state{
					display: none;
				}
			}
		}
		.subMenu{
			left:100%;
			top:0;
			position: absolute;
			overflow: visible;
			.nodeSelf,.nodeLeaf{
				.flexCtn();
			}
		}
		.branchNode{
			position: relative;
			&.fold{
				.subMenu{
					display: none;
				}	
			}
		}
	}
}
